<template>
  <a-card title="图标风格">
    <a-radio-group
      v-model:value="store.$state.theme.iconStyle"
      :options="iconTypeOptions"
      @change="setIconType"
    ></a-radio-group>
  </a-card>
  <a-card>
    <template #title>
      <div>主题颜色</div>
    </template>
    <div class="color-palette">
      <ul class="flex gc-4 align-center">
        <li
          class="flex flex-s align-center"
          v-for="(item, key) in colorList"
          :key="key"
          :style="{ background: item }"
          @click="selectItem(item)"
          :class="{ active: item === store.$state.theme.theme }"
        >
          <CheckOutlined class="text-12" v-if="item === store.$state.theme.theme" />
        </li>
        <a-divider type="vertical"></a-divider>
        <a-popover title="自定颜色" trigger="click">
          <div class="system__icon system__subtitle">
            <BgColorsOutlined />
            <span class="text-12 mx-8">自定义</span>
            <div class="custom-color" :style="{ background: store.$state.theme.theme }"></div>
          </div>
          <template #content>
            <Vue3ColorPicker
              mode="solid"
              :showColorList="false"
              :showEyeDrop="false"
              @update:model-value="setColor"
            />
          </template>
        </a-popover>
      </ul>
    </div>
  </a-card>
  <a-card title="底色选择">
    <a-segmented
      :options="underpaintingOptions"
      v-model:value="store.$state.theme.underpainting"
      @change="selectUnderpainting"
    ></a-segmented>
  </a-card>
</template>

<script setup lang="ts">
import { DEFAULT_ICON } from '@/initialization';
import usePageStore from '@/store/page';
import { BgColorsOutlined } from '@ant-design/icons-vue';
import { Vue3ColorPicker } from '@cyhnkckali/vue3-color-picker';
import { useCssVar } from '@vueuse/core';
import { colorList, iconTypeOptions, underpaintingOptions } from '../data/options';
const store = usePageStore();
const setColor = (data: string) => {
  store.$state.theme.theme = data;
};

const selectItem = (item: string) => {
  store.$state.theme.theme = '';
  store.$state.theme.theme = item;
  const color = useCssVar('--primary', document.body);
  color.value = item;
};
const selectUnderpainting = (val: any) => {
  const underpainting = useCssVar('--underpainting', document.body);
  underpainting.value = val;
};
const setIconType = () => {
  DEFAULT_ICON.value = store.$state.theme.iconStyle;
};
</script>

<style lang="scss" scoped>
.color-palette {
  li {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #c2c2c2;
    cursor: pointer;
    color: white;
  }
  li.active {
    $active-color: #e9e9e9;
    border-color: var(--primary);
    color: white;
  }
  input[type='color'] {
    width: 24px;
    height: 24px;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
}
</style>
